<template>
  <transition name="fn-indicator">
    <div class="fn-indicator" v-show="visible">
      <div class="fn-indicator-wrapper" :style="{ 'padding': text ? '20px' : '0' }">
        <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="circle" class="g-circles g-circles--v1">
            <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
            <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
            <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
            <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
            <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
            <circle id="7" cx="60" cy="110" r="10"></circle>
            <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
            <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
            <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
            <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
            <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
            <circle id="1" cx="60" cy="10" r="10"></circle>
          </g>
          <use xlink:href="#circle" class="use"/>
        </svg>
        <span class="fn-indicator-text" v-show="text">{{ text }}</span>
      </div>
      <div class="fn-indicator-mask" @touchmove.stop.prevent></div>
    </div>
  </transition>
</template>

<style lang="less" scoped>
  

  @b-width        : 75 * 1rem;
  @vw-width       : 75 * 1vw * 0.1;

  .fn-indicator {
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
  }

  .fn-indicator-wrapper {
    top: 50%;
    left: 50%;
    position: fixed;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 5px;
    background: rgba(0,0,0,.7);
    color: #fff;
    box-sizing: border-box;
    text-align: center
  }

  .fn-indicator-text {
    display: block;
    color: #fff;
    text-align: center;
    font-size: 28px
  }

  .fn-indicator-spin {
    display: inline-block;
    text-align: center
  }

  .fn-indicator-mask {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: transparent
  }

  .fn-indicator-enter,.fn-indicator-leave-active {
    opacity: 0
  }

  svg {
    height: 100/@b-width;
    height: 100/@vw-width;
    width: 100/@b-width;
    width: 100/@vw-width;
    margin: 2em;
    overflow: visible;
  }

  .g-circles {
    -webkit-transform: scale(0.9) translate(7px, 7px);
    -ms-transform: scale(0.9) translate(7px, 7px);
    transform: scale(0.9) translate(7px, 7px);
  }

  circle {
    fill: #fff;
    fill-opacity: 0;
    -webkit-animation: opacity 1.2s linear infinite;
    animation: opacity 1.2s linear infinite;
  }
  circle:nth-child(12n + 1) {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }
  circle:nth-child(12n + 2) {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
  }
  circle:nth-child(12n + 3) {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
  }
  circle:nth-child(12n + 4) {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
  }
  circle:nth-child(12n + 5) {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
  }
  circle:nth-child(12n + 6) {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
  }
  circle:nth-child(12n + 7) {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
  }
  circle:nth-child(12n + 8) {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
  circle:nth-child(12n + 9) {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  circle:nth-child(12n + 10) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }
  circle:nth-child(12n + 11) {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  circle:nth-child(12n + 12) {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }

  @-webkit-keyframes opacity {
    3% {
      fill-opacity: 1;
    }

    75% {
      fill-opacity: 0;
    }
  }

  @keyframes opacity {
    3% {
      fill-opacity: 1;
    }

    75% {
      fill-opacity: 0;
    }
  }

</style>

<script type="text/babel">
  export default {
    data() {
      return {
        visible: false
      };
    },
    computed: {
      convertedSpinnerType() {
        console.log(this.spinnerType)
        switch (this.spinnerType) {
          case 'double-bounce':
            return 1;
          case 'triple-bounce':
            return 2;
          case 'fading-circle':
            return 3;
          default:
            return 0;
        }
      }
    },
    props: {
      text: String
    }
  };
</script>